<template>
  <div class="hbox">
    <van-image round width="100px" height="100px" :src="uinfo.headIcon"/>
    <h2>{{ uinfo.mobile }}</h2>
  </div>
  <van-cell-group>
    <van-cell center is-link>
      <template #title>
        <van-icon name="coupon" />&nbsp;
        <span class="custom-title">卖座券</span>
      </template>
    </van-cell>
    <van-cell center is-link>
      <template #title>
        <van-icon name="cart-circle" />&nbsp;
        <span class="custom-title">组合红包</span>
      </template>
    </van-cell>
    <van-cell center is-link>
      <template #title>
        <van-icon name="gem" />&nbsp;
        <span class="custom-title">余额</span>
      </template>
      <template #right-icon>
        888.88元 &nbsp;&nbsp;
        <van-icon name="arrow" />
      </template>
    </van-cell>
    <van-cell center is-link>
      <template #title>
        <van-icon name="setting" />&nbsp;
        <span class="custom-title">设置</span>
      </template>
    </van-cell>
  </van-cell-group>
</template>
<script setup lang='ts'>
// 发出 axios 请求，获取用户信息
import { ref } from "@vue/reactivity";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { userInfo } from "../api/api";
interface UserType {
  "userId": number;
  "mobile": string;
  "gender": number;
  "headIcon": string;
}
const router = useRouter();
const store = useStore();
// 在这里需要进行一次判断，如果未登陆状态需要强制跳转到
if(store.state._token === ""){
  router.push("/login")
}
const uinfo = ref<UserType>({
  "userId": 0,
  "mobile": "",
  "gender": 0,
  "headIcon": ""
})
console.log(store.state._token);
(async () => {
  const res = await userInfo(store.state._token);
  uinfo.value = res.data.userinfo;
})();
</script>
<style scoped lang='scss'>
.hbox {
  display: flex;
  align-items: center;
  padding: 40px;
  h2 {
    font-size: 21px;
    margin-left: 20px;
  }
}
</style>